<template>
	<view>
		<!-- 选择课程的页面 -->
		<view v-if="label == 'courses'">
			<view class="course_info" v-for="(item, index) in courseList" :key="index">
				<image mode="aspectFit" :src="item.imageUrl" @click="selectCourse(item._id)"></image>
				<view class="course_detail">
					<view @click="selectCourse(item._id)" style="width: 300rpx;">
						<view>《{{item.name}}》</view>
						<text style="font-size: 30rpx;margin: 10rpx;color: #FF5A5F;">￥{{item.price}}</text>
					</view>
					<button class="course_btn" @click="selectCourse(item._id)">选择</button>
				</view>
			</view>
		</view>
		<!-- 选择老师的页面 -->
		<view v-if="label == 'teather'">
			<!-- 老师信息 -->
			<view class="teacher_info" v-for="(item, index) in teacherList" :key="index">
				<image mode="heightFix" :src="item.avatarUrl"></image>
				<view class="teacher_detail">
					<view>{{item.realName}}</view>
				</view>
				<button class="teacher_btn" @click="chooseTeacher(item)">选择老师</button>
			</view>
		</view>
		<!-- 选择学生的页面 -->
		<view v-if="label == 'students'">
			<!-- 学生信息 -->
			<form @submit="formSubmit">
				<checkbox-group style="margin: 10rpx 30rpx;" name="students">
					<checkbox v-for="(item, index) in studentList" :key="index" style="width: 100%;" :value="item.openId" :checked="tools.ifCheck(students, item.openId)">
						<view class="teacher_info">
							<image mode="heightFix" :src="item.avatarUrl"></image>
							<view class="teacher_detail">
								<view>{{item.realName}}</view>
							</view>
						</view>
					</checkbox>
				</checkbox-group>
				<button form-type="submit" class="submitButton">确定</button>
			</form>
		</view>
		<!-- 修改课表的页面 -->
		<view v-if="label == 'courses_editor'">
			<view class="course_info" v-for="(item, index) in courseList" :key="index">
				<image mode="aspectFit" :src="item.imageUrl" @click="editorCourse(index)"></image>
				<view class="course_detail">
					<view @click="editorCourse(index)" style="width: 300rpx;">
						<view>《{{item.name}}》</view>
					</view>
					<button class="course_btn" @click="editorCourse(index)">编辑</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import cloudbase from '@cloudbase/js-sdk';
	
	const db = cloudbase.database();
	const dbCmd = db.command;
	let that;
	export default {
		data() {
			return {
				label: '',
				classType: '钢琴',
				courseList: [],
				teacherList: [],
				studentList: [],
				students: [], // 已经选中的学生
				courseItem: [], // 上课时间
				classId: ''
			}
		},
		onLoad(e) {
			that = this;
			if(e.classType) that.classType = e.classType; 
			if(e.label) that.label = e.label;
			if(that.label == 'courses'){
				// 获取全部课程
				db.collection('course').where({
					status: '已发布',
					label: that.classType
				}).get().then(res=>{
					that.courseList = res.data;
					res.data.forEach(item=>{
						cloudbase.getTempFileURL({
							fileList: [item.imageUrl]
						}).then(res => {
							item.imageUrl = res.fileList[0].tempFileURL
						});
					})
				})
			}else if(that.label == 'teather'){
				// 获取机构的老师
				db.collection('user').where({
					institutionId: getApp().globalData.userInfo.institutionId,
					type: '教师'
				}).get().then(res=>{
					console.log(res.data);
					that.teacherList = res.data;
				})
			}else if(that.label == 'students'){
				// 获取机构的学生
				db.collection('user').where({
					institutionId: getApp().globalData.userInfo.institutionId,
					type: '学生'
				}).get().then(res=>{
					console.log(res.data);
					that.studentList = res.data;
				})
				if(e.students){
					console.log(e.students);
					that.students = e.students;
				}
			}
			if(e.courseItem){
				// 获取课程信息
				this.classId = e.classId;
				let courseItem = JSON.parse(e.courseItem);
				that.label = 'courses_editor';
				that.courseItem = courseItem;
				// 获取课程信息
				courseItem.forEach(item=>{
					db.collection('course').where({
						_id: item._id
					}).get().then(res=>{
						that.courseList.push(res.data[0]);
						let item = res.data[0];
						cloudbase.getTempFileURL({
							fileList: [item.imageUrl]
						}).then(res => {
							item.imageUrl = res.fileList[0].tempFileURL
						});
					})
				})
			}
		},
		methods: {
			editorCourse(index){
				uni.navigateTo({
					url: '../chooseTime/chooseTime?time=' + JSON.stringify(this.courseItem[index]) + '&classId=' + this.classId + '&index=' + index + '&schedule=true'
				})
			},
			// 选择课程时间
			selectCourse(_id){
				uni.navigateTo({
					url: '../chooseTime/chooseTime?_id=' + _id
				})
			},
			chooseTeacher(item){
				getApp().globalData.classTeacher = item; 
				uni.navigateBack({
					delta: 1
				})
			},
			// 提交学生名单
			formSubmit(res){
				console.log(res.detail.value.students);
				getApp().globalData.students = res.detail.value.students; 
				uni.navigateBack({
					delta: 1
				})
			}
		}
	}
</script>

<script module="tools" lang="wxs">
	function ifCheck(arr, str) {
		if(arr == null) return false;
		else return arr.indexOf(str) !== -1;
	}
	module.exports = {
		ifCheck: ifCheck
	}
</script>

<style>
	.course_info{
		background-color: #fff;
		padding: 30rpx;
		margin: 20rpx 0;
		border-radius: 16rpx;
		display: flex;
	}
	.course_info image{
		height: 150rpx;
		width: 150rpx;
	}
	.course_detail{
		display: flex;
		width: max-content;
		align-items: center;
		line-height: 60rpx;
		margin-left: 20rpx;
		width: calc(100% - 150rpx);
	}
	.author{
		margin-left: 30rpx;
		font-size: 28rpx;
		color: #999;
	}
	.course_btn{
		background-color: #FD973F;
		color: #fff;
		font-size: 26rpx;
		border-radius: 16rpx;
		margin-right: 0rpx;
		line-height: 50rpx;
		height: 50rpx;
	}
	.course_active{
		font-weight: bold;
		border-bottom: solid 6rpx #FD973F;
	}
	
	.teacher_info{
		background-color: #fff;
		padding: 20rpx;
		/* border-radius: 24rpx; */
		display: flex;
		align-items: center;
		margin: 20rpx 30rpx;
	}
	.teacher_info image{
		height: 100rpx;
		margin-right: 30rpx;
	}
	.teacher_detail image{
		height: 35rpx;
		margin: 10rpx 5rpx;
	}
	.teacher_btn{
		background-color: #FD973F;
		color: #fff;
		font-size: 26rpx;
		border-radius: 16rpx;
		margin-right: 0;
		line-height: 58rpx;
	}
	
	.submitButton {
		width: 70%;
		margin-top: 100rpx;
		border-radius: 16rpx;
		background-color: #FD973F;
		color: #fff;
		position: fixed;
		bottom: 60rpx;
		left: 15%;
	}
</style>
